<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Grid-parallax - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/grid-parallax.js"></script>

        <style>

            .uk-panel {
                height: 300px;
            }

            :nth-child(5n-4) > .uk-panel { background: rgba(0,0,0,0.2); }
            :nth-child(5n-3) > .uk-panel { background: rgba(0,0,0,0.3); }
            :nth-child(5n-2) > .uk-panel { background: rgba(0,0,0,0.4); }
            :nth-child(5n-1) > .uk-panel { background: rgba(0,0,0,0.5); }
            :nth-child(5n) > .uk-panel { background: rgba(0,0,0,0.6); }

            .test { background: rgba(0,0,0,0.1); }

        </style>

    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Grid parallax</h1>

            <h2>3 Columns</h2>

            <div class="test uk-clearfix">
                <div class="uk-grid uk-grid-match uk-grid-width-medium-1-3" data-uk-grid-margin data-uk-grid-parallax>
                    <div>

                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>

                    </div>
                    <div>

                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>

                    </div>
                    <div>

                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>
                        <div class="uk-panel uk-panel-box"></div>

                    </div>
                </div>
            </div>

            <h2>Multi-row</h2>

            <div class="test uk-clearfix">
                <div class="uk-grid uk-grid-match uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5" data-uk-grid-margin data-uk-grid-parallax="translate:200">
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                    <div><div class="uk-panel uk-panel-box"></div></div>
                </div>
            </div>

        </div>

    </body>
</html>